<template>
	<view class="page">
		<!-- 就诊人切换 -->
		<ChangePatient></ChangePatient>
		<!-- 状态栏 -->
		<view class="statusbar">
			<view class="status" :class="{active:statusFree==0}" @click="changesta(0)">
				候诊（接诊）
			</view>
			<view class="status" style="border-left: 2rpx solid rgba(242, 242, 242, 1);border-right:  2rpx solid rgba(242, 242, 242, 1);" :class="{active:statusFree==1}" @click="changesta(1)">
				检查
			</view>
			<view class="status" :class="{active:statusFree==2}" @click="changesta(2)">
				取药
			</view>
		</view>
		<!-- 状态内容切换 -->
		<view class="status_content">
			<!-- 候诊 -->
			<view class="waitlists" v-if="statusFree==0">
				<view class="waitlist">
					<view class="doctorInfo">
						<image style="width: 90rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png" mode="widthFix"></image>
						<view class="textInfo">
							<view class="name_call">
								<view class="name">
									刘医生
								</view>
								<view class="call">
									主任医师
								</view>
							</view>
							<view class="depart_campus">
								<view class="depart">
									门诊外一科
								</view>
								<view class="campus">
									四川省保健院南苑
								</view>
							</view>
						</view>
					</view>
					<view class="Queuing_situation">
						<view class="current">
							<view class="currentText">
								当前接诊号
							</view>
							<view class="currentCode">
								15
							</view>
						</view>
						<view class="view" @click="view">
							查看排队情况 >
						</view>
					</view>
				</view>
				<view class="waitlist">
					<view class="doctorInfo">
						<image style="width: 90rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png" mode="widthFix"></image>
						<view class="textInfo">
							<view class="name_call">
								<view class="name">
									张医生
								</view>
								<view class="call">
									主任医师
								</view>
							</view>
							<view class="depart_campus">
								<view class="depart">
									口腔科
								</view>
								<view class="campus">
									四川省保健院南苑
								</view>
							</view>
						</view>
					</view>
					<view class="Queuing_situation">
						<view class="current">
							<view class="currentText">
								当前接诊号
							</view>
							<view class="currentCode">
								6
							</view>
						</view>
						<view class="view" @click="view">
							查看排队情况 >
						</view>
					</view>
				</view>
			</view>
			<!-- 检查 -->
			<view class="inspectlists" v-if="statusFree==1">
				<view class="inspectlist">
					<view class="waitNum">
						<view class="waitText">
							前方等待人数
						</view>
						<view class="waitCode">
							15
						</view>
					</view>
					<view class="placeInfo">
						<view class="place">
							CT检查室
						</view>
						<view class="campus">
							四川省保健院南苑
						</view>
					</view>
				</view>
			</view>
			<!-- 取药 -->
			<view class="inspectlists" v-if="statusFree==2">
				<view class="inspectlist">
					<view class="waitNum">
						<view class="waitText">
							前方等待人数
						</view>
						<view class="waitCode">
							15
						</view>
					</view>
					<view class="placeInfo">
						<view class="place">
							门诊西药房  2号窗口
						</view>
						<view class="campus">
							四川省保健院南苑
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
	// 状态切换
	const statusFree = ref(0)
	const changesta = (index) => {
		statusFree.value=index
	}
	// 查看排队情况
	const view = () => {
		uni.navigateTo({
			url:'/pages/Waiting_Details/Waiting_Details'
		})
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding: 26rpx 25rpx 0;
		box-sizing: border-box;
		// 就诊人切换
		.patient{
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding:  0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.peopleInfo{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				height: 44rpx;
				.name{
					font-size: 32rpx;
				}
				.patient_card{
					color: #aaa;
					margin-left: 44rpx;
				}
			}
			.operate{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				color: #000;
				cursor: pointer;
				.qie{
					margin-left: 12rpx;
				}
			}
		}
		// 就诊人切换弹出层
		.popup{
			
			.popup-content {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// justify-content: center;
				border-radius: 72rpx 72rpx 0 0;
				padding: 30rpx 45rpx 0;
				box-sizing: border-box;
				height: 804rpx;
				background-color: #fff;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				position: relative;
				.title{
					font-size: 32rpx;
					font-weight: 700;
					width: 100%;
					text-align: center;
				}
				.close{
					width: 32rpx;
					position: absolute;
					right: 45rpx;
					cursor: pointer;
					top: 38rpx;
				}
				
				.patientlists{
					margin-top: 60rpx;
					.patientlist{
						width: 660rpx;
						height: 92rpx;
						border-radius: 16rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						background-color: rgba(230, 244, 255, 1);
						font-size: 28rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						margin-bottom: 40rpx;
						.patient_card{
							margin-left: 20rpx;
							color: #aaa;
						}
					}
				}
				.addpatient{
					width: 660rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #fff;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
					background-size: cover;
					position: absolute;
					bottom: 40rpx;
				}
			}
		}
		// 状态栏
		.statusbar{
			width: 100%;
			height: 82rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			overflow: hidden;
			border-radius: 16rpx;
			margin: 30rpx 0;
			.status{
				width: calc(100%/3);
				height: 82rpx;
				line-height: 82rpx;
				text-align: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				cursor: pointer;
			}
			.active{
				background-color: rgba(22, 119, 255, 1);
				color: #fff;
			}
		}
		// 状态内容切换
		.status_content{
			// 候诊
			.waitlists{
				.waitlist{
					width: 100%;
					height: 302rpx;
					background-color: #fff;
					padding: 36rpx 40rpx 36rpx 50rpx; 
					box-sizing: border-box;
					border-radius: 16rpx;
					margin-bottom: 40rpx;
					.doctorInfo{
						display: flex;
						.textInfo{
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #1F1F1F;
							margin-left: 40rpx;
							.name_call{
								display: flex;
								align-items: baseline;
								.name{
									font-weight: 700;
									font-size: 36rpx;
									color: #000;
								}
								.call{
									font-size: 26rpx;
									margin-left: 26rpx;
								}
							}
							.depart_campus{
								height: 40rpx;
								font-size: 28rpx;
								display: flex;
								align-items: center;
								margin-top: 4rpx;
								.campus{
									margin-left: 28rpx;
								}
							}
						}
					}
					.Queuing_situation{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 48rpx;
						.current{
							width: 296rpx;
							height: 76rpx;
							background-color: rgba(255, 251, 230, 1);
							color: #FAAD14;
							border-radius: 16rpx;
							font-family: 'ArialMT', 'Arial', sans-serif;
							font-size: 28rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding:  0 32rpx;
							box-sizing: border-box;
							.currentCode{
								font-size: 40rpx
							}
						}
						.view{
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #1677FF;
						}
					}
				}
			}
			// 检查
			.inspectlists{
				.inspectlist{
					width: 100%;
					height: 166rpx;
					background-color: #fff;
					border-radius: 16rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					.waitNum{
						width: 220rpx;
						height: 166rpx;
						color: #FAAD14;
						background-color: rgba(255, 251, 230, 1);
						font-family: 'ArialMT', 'Arial', sans-serif;
						font-size: 28rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.waitCode{
							font-size: 40rpx;
							margin-top: 20rpx;
						}
					}
					.placeInfo{
						padding-left: 34rpx;
						box-sizing: border-box;
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #000;
						.place{
							font-weight: 700;
						}
						.campus{
							margin-top: 22rpx;
						}
					}
				}
			}
		}
	}       
</style>
